<template>
  <view class="container">
    <!-- 头部背景图 -->
    <image src="/sub_shop/static/images/swiperbgc.png" mode="" class="swiperbgc"></image>
    <!-- 头部搜索组件 -->
    <headerCom style="position: absolute; top: 50rpx">
      <template #sort>
        <image src="/sub_shop/static/images/sort.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 100rpx"></image>
      </template>
    </headerCom>

    <!-- 公告区域 -->
    <view class="title">关于2023年春节放假的工作安排，要购置年货的 朋友请提前下单</view>
    <view class="tiem">2023-09-07 08:59 发布</view>
    <rich-text :nodes="text"></rich-text>

    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
  </view>
</template>

<script>
import headerCom from '@/components/headersearch/headersearch.vue';
import footerCom from '@/components/shopfooter/shopfooter.vue';
export default {
  components: {
    headerCom,
    footerCom
  },
  data() {
    return {
      text: ''
    };
  }
};
</script>

<style lang="less" scoped>
.container {
  .swiperbgc {
    width: 750rpx;
    height: 176rpx;
  }
  .title {
    width: 684rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #222222;
    margin: 24rpx 28rpx;
  }
  .tiem {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #222222;
    margin: 24rpx 28rpx;
  }
}
</style>
